<template>
  <a-layout-sider v-model:collapsed="collapsed">
    <div class="logo" />
    <a-menu
      v-model:selectedKeys="selectedKeys"
      theme="dark"
      mode="inline"
      @click="handleClick"
      :selectedKeys="[$route.path]"
    >
      <a-sub-menu key="sub1">
        <template #title>
          <span>
            <user-outlined />
            <span>系统管理</span>
          </span>
        </template>
        <a-menu-item key="/user/contentpage">用户管理</a-menu-item>
        <a-menu-item key="/user/authority-manger">权限配置</a-menu-item>
        <a-menu-item key="/user/role-manger">角色管理</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <template #title>
          <span>
            <team-outlined />
            <span>合同管理</span>
          </span>
        </template>
        <a-menu-item key="/contract/ExpenditureContract">收入合同</a-menu-item>
        <a-menu-item key="/contract/RevenueContract">支出合同</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub3">
        <template #title>
          <span>
            <team-outlined />
            <span>财务管理</span>
          </span>
        </template>
        <a-menu-item key="8">财务收入</a-menu-item>
        <a-menu-item key="9">财务支出</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()

const handleClick = (item) => {
  if (item.key !== route.path) {
    router.push(item.key)
  }
}



</script>

<style scoped lang="less">
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}


</style>
